import React, { memo, forwardRef } from 'react';
import { Button as AntButton } from 'antd';
import type { ButtonProps as AntButtonProps } from 'antd';
import classNames from 'classnames';
import styles from './Button.module.css';

/**
 * 按钮组件属性接口
 * @description 扩展 Ant Design Button 组件的属性
 */
export interface IButtonProps extends Omit<AntButtonProps, 'size' | 'variant'> {
  /** 按钮尺寸 */
  size?: 'small' | 'middle' | 'large';
  /** 按钮变体 */
  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
  /** 是否为圆形按钮 */
  round?: boolean;
  /** 是否为方形按钮 */
  square?: boolean;
  /** 自定义类名 */
  className?: string;
  /** 子元素 */
  children?: React.ReactNode;
}

/**
 * 按钮组件
 * @description 基于 Ant Design Button 的自定义按钮组件，提供统一的样式和行为
 */
const Button = memo(forwardRef<HTMLButtonElement, IButtonProps>(({
  variant = 'primary',
  round = false,
  square = false,
  className,
  children,
  ...props
}, ref) => {
  // 根据变体设置按钮类型和样式
  const getButtonType = (): AntButtonProps['type'] => {
    switch (variant) {
      case 'primary':
        return 'primary';
      case 'danger':
        return 'primary';
      case 'secondary':
      case 'success':
      case 'warning':
      case 'info':
      default:
        return 'default';
    }
  };

  // 根据变体设置危险状态
  const getDanger = (): boolean => {
    return variant === 'danger';
  };

  // 组合类名
  const buttonClassName = classNames(
    styles.button,
    {
      [styles.round]: round,
      [styles.square]: square,
      [styles.secondary]: variant === 'secondary',
      [styles.success]: variant === 'success',
      [styles.warning]: variant === 'warning',
      [styles.info]: variant === 'info',
    },
    className
  );

  return (
    <AntButton
      ref={ref}
      type={getButtonType()}
      danger={getDanger()}
      className={buttonClassName}
      {...props}
    >
      {children}
    </AntButton>
  );
}));

Button.displayName = 'Button';

export default Button;